;(function ($) {
  var opts = {
    fade: 200,
    html: false,
    placement: 'top'
  }


  $.fn.toolTip2 = function (params) {
    params = $.extend({}, opts, params)
    var fade = params.fade ? params.fade : 0
    return this.each(function () {
      // this是DOM对象
      var title = params.title || $(this).data('title')
      var placement =  $(this).data('placement') || params.placement
      console.log(title)

      // 生成toolTip
      var $toolTip = $('<i class="toolTip ' + placement + '" style="display: none"></i>')

      if (params.html) {
        $toolTip.html(title)
      } else {
        $toolTip.text(title)
      }

      $(this).hover(function () {
        // 把toolTip放入body中
        $toolTip.appendTo('body')
        // 获取尺寸
        var 
          offset = $(this).offset(),
          toolTip_WIDTH = $toolTip.innerWidth(),
          toolTip_HEIGHT = $toolTip.innerHeight(),
          WIDTH = $(this).innerWidth(),
          HEIGHT = $(this).innerHeight()
        
        // console.log(offset, toolTip_WIDTH, WIDTH)
        switch (placement) {
          case 'top':
            var left = offset.left - (toolTip_WIDTH - WIDTH) / 2
            var top = offset.top - toolTip_HEIGHT - 5
            break

          case 'right':
            var left = offset.left + WIDTH + 5
            var top = offset.top - (toolTip_HEIGHT-HEIGHT) / 2
            break

          case 'bottom':
            var left = offset.left - (toolTip_WIDTH - WIDTH) / 2
            var top = offset.top + HEIGHT + 5
            break
          case 'left':
            var left = offset.left - toolTip_WIDTH - 5
            var top = offset.top - (toolTip_HEIGHT-HEIGHT) / 2
            break

        }

        $toolTip.css({
          left: left,
          top: top
        }).stop().fadeIn(fade)

      }, function () {
        $toolTip.stop().fadeOut(fade, function () {
          $(this).remove()
        })
      })
    })
  } 
}(jQuery))